<template>
  <div>
    具名父组件
    <hr />
    <!-- 如果是单闭合标签，就代表不使用插槽 -->
    <!-- <my-dialog /> -->

    <my-dialog>
      <!-- 这里的template是具名插槽的组成部分 -->
      <template v-slot:title>
        <p style="color:#109cfa;">这个是标题呀</p>
      </template>

      <!-- 其实在父组件中替换默认插槽，可以不用写template（但是其它要写）,如果一定要写，名字一定要叫default -->
      <!-- <template #default> -->
      <table border="1px">
        <thead>
          <th>名字</th>
          <th>年龄</th>
          <th>籍贯</th>
        </thead>
        <tbody>
          <tr>
            <td>刘鹏</td>
            <td>28</td>
            <td>贵州铜仁</td>
          </tr>
          <tr>
            <td>阿扬</td>
            <td>22</td>
            <td>福建泉州</td>
          </tr>
        </tbody>
      </table>
      <!-- </template> -->

      <!-- v-slot可以简写成# -->
      <template #footer>
        <button>取消</button>&nbsp;
        <button style="backgroundColor:red;">确定</button>
      </template>
    </my-dialog>
  </div>
</template>

<script>
import myDialog from './my-dialog'
export default {
  components: {
    myDialog
  }
}
</script>
